<template>
  <div>
<h2>{{ name }}--{{ age }}</h2>
<button @click="changeName">change name</button>
<button @click="changeAge">change age</button>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'
export default {
  setup () {
    const name=ref('小帅')
    const age=ref(18)

    const changeName=()=>{
    name.value='大帅'
    }
    const changeAge=()=>{
    
      age.value++
      if(age.value>25){
        stop()
      }
    }

    const stop=watchEffect((onInvalidate)=>{  //watchEffect观察者的副作用
      const timer=setTimeout(()=>{
        console.log('数据请求到了');
      },2000)
      // watchEffect 的回调函数
      onInvalidate(()=>{
        clearTimeout(timer)  //终止上一次的请求
        console.log('onInvalidate');
      })
      console.log(`name：${name.value}--age:${age.value}`);
    })
    // console.log(stop);
    return {
      name,
      age,
      changeName,
      changeAge
    }
  }
}
</script>

<style lang="scss" scoped>

</style>